<div class="user-container" style="overflow: auto;">
  <nz-card>
    <div class="add-box">
      <button nz-button (click)="openEditModal()" nzType="primary">新增</button>
    </div>
    <nz-table
      #nzTable
      [nzData]="tableData"
      [nzFrontPagination]="false"
      [nzTotal]="total"
      [nzPageSize]="pageSize"
      [(nzPageIndex)]="pageNum"
      (nzPageIndexChange)="queryInfo()"
    >
      <thead>
        <tr>
          <th>角色名称</th>
          <th>角色类型</th>
          <!-- <th>删除标记</th> -->
          <th>是否可用</th>
          <th>备注信息</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of nzTable.data">
          <td>{{ row.name }}</td>
          <td>{{ roleMapper[row.roleType] }}</td>
          <!-- <td>{{ row.delFlag }}</td> -->
          <td>{{ useableMapper[row.useable] }}</td>
          <td>{{ row.remarks }}</td>
          <td>{{ row.createDate }}</td>
          <td>
            <i
              nz-icon
              nzType="edit"
              nzTheme="outline"
              (click)="openEditModal(row)"
            ></i>
            <a
              nz-popconfirm
              nzPopconfirmTitle="确认删除该角色吗？"
              nzPopconfirmPlacement="left"
              (nzOnConfirm)="onDelete(row.id)"
            >
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
  <nz-modal
    [nzBodyStyle]="nzBodyStyle"
    nzWidth="800"
    [(nzVisible)]="modalShow"
    [nzTitle]="modalTitle"
    (nzOnCancel)="onCancel()"
    (nzOnOk)="onConfirm()"
  >
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <form nz-form [formGroup]="form">
          <nz-form-item>
            <nz-form-label>角色名称</nz-form-label>
            <nz-form-control>
              <input nz-input placeholder="角色名称" formControlName="name" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>角色类型</nz-form-label>
            <nz-form-control>
              <nz-select placeholder="角色类型" formControlName="roleType">
                <nz-option
                  *ngFor="let item of roleTypes"
                  [nzValue]="item.value"
                  [nzLabel]="item.label"
                >
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>是否可用</nz-form-label>
            <nz-form-control>
              <nz-select placeholder="是否可用" formControlName="useable">
                <nz-option
                  *ngFor="let item of useableList"
                  [nzValue]="item.value"
                  [nzLabel]="item.label"
                >
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>备注信息</nz-form-label>
            <nz-form-control>
              <input
                nz-input
                placeholder="备注信息"
                formControlName="remarks"
              />
            </nz-form-control>
          </nz-form-item>
          <!-- <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-control>
                <label nz-checkbox formControlName="delFlag">删除标记</label>
              </nz-form-control>
            </nz-form-item>
          </div> -->
          <!-- <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label>创建时间</nz-form-label>
              <nz-form-control>
                <nz-date-picker formControlName="createDate"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
          </div> -->
        </form>
      </div>
      <div nz-col [nzSpan]="8">
        <!-- <div>菜单选择</div> -->
        <div class="tree-box">
          <nz-tree
            #nzTreeComponent
            [nzData]="menuTree"
            nzCheckable
            [nzCheckedKeys]="defaultKeys"
            (nzCheckBoxChange)="menuCheck($event)"
          ></nz-tree>
        </div>
      </div>
      <div nz-col [nzSpan]="8">
         <div>视频权限选择</div>
        <div class="tree-box">
          <nz-tree
                  #nzMngTreeComponent
                  [nzData]="mngTree"
                  nzCheckable
                  [nzCheckedKeys]="defaultKeysActive"
                  (nzCheckBoxChange)="mngListCheck($event)"
          ></nz-tree>
        </div>
      </div>
    </div>
  </nz-modal>
</div>
